<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <th:block th:include="include :: header('领导视图-数据统计')" />
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css"/>
    <!-- 引入 Bootstrap -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .nav.nav-tabs li {
            padding: 0px;
        }
        .ibox-title {
            background-color: #3A75C3;
            color: white;
            font-size: 16px;
        }
        .ibox-content {
            padding: 0px;
        }
        .table>thead>tr>th {
            text-align: center;
            padding: 4px;
        }
        .table>thead>tr>td {
            text-align: center;
            padding: 4px;
        }
    </style>
</head>
<body class="white-bg" style="font-size: 16px;">
    <div class="navbar-fixed-top">
        <!--导航TAB页面-->
        <div class="nav nav-tabs">
            <ul id="selectTab" class="nav nav-tabs" style="text-align:center; background-color: #3A75C3;">
                <li class="active col-xs-6">
                    <a href="#internalPersonnel" id="internalPersonnelTab" aria-controls="internalPersonnel" data-toggle="tab">内部人员</a>
                </li>
                <li class="col-xs-6">
                    <a href="#externalPersonnel" id="externalPersonnelTab" aria-controls="externalPersonnel" data-toggle="tab">委外人员</a>
                </li>
            </ul>
        </div>
        <!--搜索控件-->
        <div class="container">
            <div class="row" style="margin: 0px">
                <div class="col-xs-3">日期:</div>
                <div class="col-xs-9 date" style="padding: 0px">
                    <input type="text" style="width: 100%" name="belongDate" th:value="${belongDate}" id="datetime-picker" required="required" onChange="dateChange()">
                </div>
            </div>
            <div class="row" style="margin: 0px; padding-top: 5px;">
                <div class="col-xs-3">公司:</div>
                <div class="col-xs-9" id="internalSelectDiv" style="display: block;padding: 0px">
                    <select class="form-control text-center" style="font-size: 16px" id="internalDeptSelect" onchange="internalDeptSelectChange()">
                        <option value="">所有</option>
                        <option th:each="dict : ${list}" th:text="${dict.deptName}" th:value="${dict.deptId}"></option>
                    </select>
                </div>
                <div class="col-xs-9" id="externalSelectDiv" style="display: none;padding: 0px">
                    <select class="form-control text-center" style="font-size: 16px" id="externalDeptSelect" onchange="externalDeptSelectChange()">
                        <option value="">所有</option>
                        <option th:each="dict : ${listForExternal}" th:text="${dict.deptName}" th:value="${dict.deptId}"></option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <div class="container" style="padding-top: 115px">
        <!--   内部人员，用于进行审核操作         -->
        <div class="tab-pane fade in active" id="internalPersonnel">
            <div class="ibox-title">
                <label>汇总数据</label>
            </div>
            <div class="ibox-content">
                <ul id="allInDataUl">
                    <li class="list-group-item">总人数：<span class="no-margins" id="usercnt" th:text="${usercnt}"></span></li>
                    <li class="list-group-item">未填报人数：<span class="no-margins" id="notcollectcnt" th:text="${notcollectcnt}"></span></li>
                    <li class="list-group-item">总提交人数：<span class="no-margins" id="collectcnt" th:text="${collectcnt}"></span></li>
                    <li class="list-group-item">审批通过人数：<span class="no-margins" id="aduitcnt" th:text="${aduitcnt}"></span></li>
                    <li class="list-group-item">未审批数：<span class="no-margins" id="notAduitcnt" th:text="${notAduitcnt}"></span></li>
                    <!--新增该公司下的一级子公司表-->
                    <li class="list-group-item" onclick="collapseBtn()">
                        <div class="row">
                            <div class="col-xs-10">
                                <label>详情</label>
                            </div>
                            <div class="col-xs-2">
                                <span class="glyphicon glyphicon-chevron-right" id="openBtn" style="display: block"></span>
                                <span class="glyphicon glyphicon-chevron-down" id="closeBtn" style="display: none"></span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item" id="allInDataUlLi"  style="padding-left: 0px;padding-right: 0px; display: none;">
                        <table class="table table-striped">
                            <thead style="text-align: center;">
                            <tr><th style="text-align: left; padding-left: 15px;">名称</th><th>总数</th><th>未填报</th><th>审批通过</th></tr>
                            </thead>
                            <tbody id="allInDataBody" style="text-align: center;"></tbody>
                        </table>
                    </li>
                </ul>
            </div>
            <div class="ibox-title">
                <label>已审批数据</label>
            </div>
            <div class="ibox-content">
                <ul id="auditedInDataUl">
                    <li class="list-group-item">正常数：<span id="nomalcnt" th:text="${nomalcnt}"></span></li>
                    <li class="list-group-item">核酸异常数：<span id="yangcnt" th:text="${yangcnt}"></span></li>
                    <li class="list-group-item">红码数：<span id="redcnt" th:text="${redcnt}"></span></li>
                    <li class="list-group-item">黄码数：<span id="yellowcnt" th:text="${yellowcnt}"></span></li>
                    <li class="list-group-item">行程码异常数：<span id="tripcnt" th:text="${tripcnt}"></span></li>
                    <li class="list-group-item">体温异常数：<span id="tempcnt" th:text="${tempcnt}"></span></li>
                </ul>
            </div>
            <div class="ibox-title">
                <label>未审批数据</label>
            </div>
            <div class="ibox-content">
                <ul id="unauditInDataUl">
                    <li class="list-group-item">正常数：<span id="notAduitnomalcnt" th:text="${notAduitnomalcnt}"></span></li>
                    <li class="list-group-item">核酸异常数：<span id="notAduityangcnt" th:text="${notAduityangcnt}"></span></li>
                    <li class="list-group-item">红码数：<span id="notAduitredcnt" th:text="${notAduitredcnt}"></span></li>
                    <li class="list-group-item">黄码数：<span id="notAduityellowcnt" th:text="${notAduityellowcnt}"></span></li>
                    <li class="list-group-item">行程码异常数：<span id="notAduittripcnt" th:text="${notAduittripcnt}"></span></li>
                    <li class="list-group-item">体温异常数：<span id="notAduittempcnt" th:text="${notAduittempcnt}"></span></li>
                </ul>
            </div>
        </div>
        <!--   委外人员，用于查看详情         -->
        <div class="tab-pane fade" id="externalPersonnel">
            <div class="ibox-title">
                <label>汇总数据</label>
            </div>
            <div class="ibox-content">
                <ul>
                    <li class="list-group-item">总提交人数：<span class="no-margins" id="collectcnt1" th:text="${collectcnt}"></span></li>
                    <li class="list-group-item">审批通过人数：<span class="no-margins" id="aduitcnt1" th:text="${aduitcnt}"></span></li>
                    <li class="list-group-item">未审批人数：<span class="no-margins" id="notAduitcnt1" th:text="${notAduitcnt}"></span></li>
                    <!--新增该公司下的一级子公司表-->
                    <li class="list-group-item" onclick="collapseBtnWb()">
                        <div class="row">
                            <div class="col-xs-10">
                                <label>详情</label>
                            </div>
                            <div class="col-xs-2">
                                <span class="glyphicon glyphicon-chevron-right" id="openBtnWb" style="display: block"></span>
                                <span class="glyphicon glyphicon-chevron-down" id="closeBtnWb" style="display: none"></span>
                            </div>
                        </div>
                    </li>
                    <li class="list-group-item" id="allInDataUlLiWb"  style="padding-left: 0px;padding-right: 0px; display: none;">
                        <table class="table table-striped">
                            <thead style="text-align: center;">
                            <tr><th style="text-align: left; padding-left: 15px;">名称</th><th>总提交</th><th>审批通过</th><th>未审批</th></tr>
                            </thead>
                            <tbody id="allExDataBody" style="text-align: center;"></tbody>
                        </table>
                    </li>
                </ul>
            </div>
            <div class="ibox-title">
                <label>已审批数据</label>
            </div>
            <div class="ibox-content">
                <ul>
                    <li class="list-group-item">正常数：<span id="nomalcnt1" th:text="${nomalcnt}"></span></li>
                    <li class="list-group-item">核酸异常数：<span id="yangcnt1" th:text="${yangcnt}"></span></li>
                    <li class="list-group-item">红码数：<span id="redcnt1" th:text="${redcnt}"></span></li>
                    <li class="list-group-item">黄码数：<span id="yellowcnt1" th:text="${yellowcnt}"></span></li>
                    <li class="list-group-item">行程码异常数：<span id="tripcnt1" th:text="${tripcnt}"></span></li>
                    <li class="list-group-item">体温异常数：<span id="tempcnt1" th:text="${tempcnt}"></span></li>
                </ul>
            </div>
            <div class="ibox-title">
                <label>未审批数据</label>
            </div>
            <div class="ibox-content">
                <ul>
                    <li class="list-group-item">正常数：<span id="notAduitnomalcnt1" th:text="${notAduitnomalcnt}"></span></li>
                    <li class="list-group-item">核酸异常数：<span id="notAduityangcnt1" th:text="${notAduityangcnt}"></span></li>
                    <li class="list-group-item">红码数：<span id="notAduitredcnt1" th:text="${notAduitredcnt}"></span></li>
                    <li class="list-group-item">黄码数：<span id="notAduityellowcnt1" th:text="${notAduityellowcnt}"></span></li>
                    <li class="list-group-item">行程码异常数：<span id="notAduittripcnt1" th:text="${notAduittripcnt}"></span></li>
                    <li class="list-group-item">体温异常数：<span id="notAduittempcnt1" th:text="${notAduittempcnt}"></span></li>
                </ul>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script>
        var now = new Date();
        var year = now.getFullYear(); //年
        var month = now.getMonth() + 1; //月
        var day = now.getDate(); //日
        var hour = now.getHours(); //小时
        var order_time = `${year}-${month}-${day} ${hour}:00:00`;
        // 日期选择控件
        var yearList = [String(year-1),String(year)];
        var monthList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12"];
        var dayList = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18",
            "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31"
        ];
        var dataList = [];
        var index = 0;
        for (var i = 0; i < yearList.length; i++) {
            // if (year <= +yearList[i]) {
            var a = {};
            a.value = yearList[i];
            a.label = `${yearList[i]}年`;
            index++;
            a.children = [];
            for (var j = 0; j < monthList.length; j++) {
                var b = {};
                b.label = `${monthList[j]}月`;
                b.value = monthList[j];
                index++;
                if (year == +yearList[i]) {
                    //if (month - 1 <= j) {
                    a.children[a.children.length] = b;
                    //}
                } else {
                    a.children[a.children.length] = b;
                }
                b.children = [];
                for (var o = 0; o < dayList.length; o++) {
                    var c = {};
                    c.label = `${dayList[o]}日`;
                    c.value = dayList[o];
                    index++;
                    if (month == +monthList[j]) {
                        //if (day - 1 <= o) {
                        b.children[b.children.length] = c;
                        // }
                    } else {
                        b.children[b.children.length] = c;
                    }
                    c.children = [];

                    if (j + 1 == 4 || j + 1 == 6 || j + 1 == 0 || j + 1 == 11) {
                        if (o == 29) o = 31;
                    } else if (j + 1 == 2) {
                        if (
                            (+yearList[i] % 4 == 0 && +yearList[i] % 100 != 0) ||
                            +yearList[i] % 400 == 0
                        ) {
                            if (o == 28) o = 31;
                        } else {
                            if (o == 27) o = 31;
                        }
                    }
                }
            }
            dataList[dataList.length] = a;
        }
        var appointment = '';
        $('.icon-picker').click(function () {
            $("#datetime-picker").click();
        })

        $("#datetime-picker").click(function () {
            weui.picker(dataList, {
                className: "custom-classname",
                container: "body",
                defaultValue: [year, month, day, hour],
                onConfirm: function (result) {
                    appointment = result[0] + "-" + result[1] + "-" + result[2] ;
                    $("#datetime-picker").val(appointment)
                    order_time = `${result[0]}-${result[1]}-${result[2]}`
                    dateChange();
                },
                id: "datetime-picker"
            });
        });
    </script>
    <script th:inline="javascript">
        document.getElementById("datetime-picker").onclick = function() {
            document.activeElement.blur();
        };
        var date=$("#datetime-picker").val();
        var prefix = "/wxcp/yqLeaderView/";

        function exptyData() {
            $("#usercnt").text("");
            $("#notcollectcnt").text("");
            $("#collectcnt").text("");
            $("#aduitcnt").text("");
            $("#notAduitcnt").text("");
            $("#nomalcnt").text("");
            $("#yangcnt").text("");
            $("#redcnt").text("");
            $("#yellowcnt").text("");
            $("#tripcnt").text("");
            $("#tempcnt").text("");
            $("#notAduitnomalcnt").text("");
            $("#notAduityangcnt").text("");
            $("#notAduitredcnt").text("");
            $("#notAduityellowcnt").text("");
            $("#notAduittripcnt").text("");
            $("#notAduittempcnt").text("");

            $("#collectcnt1").text("");
            $("#aduitcnt1").text("");
            $("#notAduitcnt1").text("");
            $("#nomalcnt1").text("");
            $("#yangcnt1").text("");
            $("#redcnt1").text("");
            $("#yellowcnt1").text("");
            $("#tripcnt1").text("");
            $("#tempcnt1").text("");
            $("#notAduitnomalcnt1").text("");
            $("#notAduityangcnt1").text("");
            $("#notAduitredcnt1").text("");
            $("#notAduityellowcnt1").text("");
            $("#notAduittripcnt1").text("");
            $("#notAduittempcnt1").text("");
        }

        function dateChange() {
            var deptId = "";
            if ($("#internalPersonnel").is(":hidden")){
                externalDeptSelectChange();
            } else if ($("#externalPersonnel").is(":hidden")){
                internalDeptSelectChange();
            }
        }

        function internalDeptSelectChange() {
            $('#allInDataBody').empty();
            $("#allInDataUlLi").attr("style","display:none;");
            $("#allInDataUlLiWb").attr("style","display:none;");
            var internalDeptSelectId=$("#internalDeptSelect").val();
            if (internalDeptSelectId == undefined || internalDeptSelectId == null || internalDeptSelectId == '') {
                internalDeptSelectId = "-100";
            }
            mysearch(internalDeptSelectId, 'N');
            // mysearchForInDeptTable(internalDeptSelectId, 'N');
        }

        function externalDeptSelectChange() {
            $('#allExDataBody').empty();
            $("#allInDataUlLi").attr("style","display:none;");
            $("#allInDataUlLiWb").attr("style","display:none;");
            var externalDeptSelectId=$("#externalDeptSelect").val();
            if (externalDeptSelectId == undefined || externalDeptSelectId == null || externalDeptSelectId == '') {
                externalDeptSelectId = "-200";
            }
            mysearch(externalDeptSelectId, 'Y');
            // mysearchForExDeptTable(externalDeptSelectId, 'Y');
        }

        function mysearch(deptId, flag){
            exptyData();
            var date=$("#datetime-picker").val();
            $.ajax({
                url: prefix+"list",
                data: {"date":date,"deptId":deptId, "flag": flag},
                type: "post",
                beforeSend: function () {
                    $.modal.loading("数据加载中...");
                    $.modal.disable();
                },
                success: function(result) {
                    $.modal.closeLoading();
                    $.modal.enable();
                    if (result != null) {
                        $("#usercnt").text(result.usercnt);
                        $("#notcollectcnt").text(result.notcollectcnt);
                        $("#collectcnt").text(result.collectcnt);
                        $("#aduitcnt").text(result.aduitcnt);
                        $("#notAduitcnt").text(result.notAduitcnt);
                        $("#nomalcnt").text(result.nomalcnt);
                        $("#yangcnt").text(result.yangcnt);
                        $("#redcnt").text(result.redcnt);
                        $("#yellowcnt").text(result.yellowcnt);
                        $("#tripcnt").text(result.tripcnt);
                        $("#tempcnt").text(result.tempcnt);
                        $("#notAduitnomalcnt").text(result.notAduitnomalcnt);
                        $("#notAduityangcnt").text(result.notAduityangcnt);
                        $("#notAduitredcnt").text(result.notAduitredcnt);
                        $("#notAduityellowcnt").text(result.notAduityellowcnt);
                        $("#notAduittripcnt").text(result.notAduittripcnt);
                        $("#notAduittempcnt").text(result.notAduittempcnt);

                        $("#collectcnt1").text(result.collectcnt);
                        $("#aduitcnt1").text(result.aduitcnt);
                        $("#notAduitcnt1").text(result.notAduitcnt);
                        $("#nomalcnt1").text(result.nomalcnt);
                        $("#yangcnt1").text(result.yangcnt);
                        $("#redcnt1").text(result.redcnt);
                        $("#yellowcnt1").text(result.yellowcnt);
                        $("#tripcnt1").text(result.tripcnt);
                        $("#tempcnt1").text(result.tempcnt);
                        $("#notAduitnomalcnt1").text(result.notAduitnomalcnt);
                        $("#notAduityangcnt1").text(result.notAduityangcnt);
                        $("#notAduitredcnt1").text(result.notAduitredcnt);
                        $("#notAduityellowcnt1").text(result.notAduityellowcnt);
                        $("#notAduittripcnt1").text(result.notAduittripcnt);
                        $("#notAduittempcnt1").text(result.notAduittempcnt);
                    }
                }
            })
        }

        function mysearchForInDeptTable(deptId, flag){
            $('#allInDataBody').empty();
            var date=$("#datetime-picker").val();
            $.ajax({
                url: prefix+"deptDetailList",
                data: {"date":date,"deptId":deptId, "flag": flag},
                type: "post",
                beforeSend: function () {
                    $.modal.loading("数据加载中...");
                    $.modal.disable();
                },
                success: function(result) {
                    $.modal.closeLoading();
                    $.modal.enable();
                    if (result != null && result.list != null) {
                        var item = "";
                        $.each(result.list, function (i,m) {
                            item += "<tr ><td style='text-align: left'>"+m.deptName+"</td><td>"+m.staticDataMap.usercnt+"</td><td>"+m.staticDataMap.notcollectcnt+"</td><td>"+m.staticDataMap.aduitcnt+"</td></tr>";
                        })
                        $('#allInDataBody').append(item);
                    }
                }
            })
        }

        function mysearchForExDeptTable(deptId, flag){
            $('#allExDataBody').empty();
            var date=$("#datetime-picker").val();
            $.ajax({
                url: prefix+"deptDetailList",
                data: {"date":date,"deptId":deptId, "flag": flag},
                type: "post",
                beforeSend: function () {
                    $.modal.loading("数据加载中...");
                    $.modal.disable();
                },
                success: function(result) {
                    $.modal.closeLoading();
                    $.modal.enable();
                    if (result != null && result.list != null) {
                        var item = "";
                        $.each(result.list, function (i,m) {
                            item += "<tr ><td style='text-align: left'>"+m.deptName+"</td><td>"+m.staticDataMap.collectcnt +"</td><td>"+m.staticDataMap.aduitcnt+"</td><td>"+m.staticDataMap.notAduitcnt+"</td></tr>";
                        })
                        $('#allExDataBody').append(item);
                    }
                }
            })
        }

        $(function() {
            //首次加载页面时,显示第一个TAB页.隐藏第二个TAB页
            // $("#internalPersonnelTab").attr("style","color:white;");
            // $("#externalPersonnelTab").attr("style","color:black;");
            $("#internalPersonnel").attr("style","display:block;");
            $("#externalPersonnel").attr("style","display:none;");
            $("#allInDataUlLi").attr("style","display:none;");
            $("#allInDataUlLiWb").attr("style","display:none;");
            //默认首次加载取内部数据
            mysearch('-100', 'N');
        })

        $('#selectTab a').click(function (e) {
            e.preventDefault();
            $(this).tab('show');
            if ($(e.target).attr("href") == "#internalPersonnel") {
                var internalDeptSelectId=$("#internalDeptSelect").val();
                if (internalDeptSelectId == undefined || internalDeptSelectId == null || internalDeptSelectId == '') {
                    internalDeptSelectId = "-100";
                }
                //内外部标识
                mysearch(internalDeptSelectId, "N");
                // $("#internalPersonnelTab").attr("style","color:white;");
                // $("#externalPersonnelTab").attr("style","color:black;");
                $("#internalPersonnel").attr("style","display:block;");
                $("#externalPersonnel").attr("style","display:none;");
                $("#internalSelectDiv").attr("style","display:block;padding: 0px");
                $("#externalSelectDiv").attr("style","display:none;padding: 0px");
            } else if ($(e.target).attr("href") == "#externalPersonnel") {
                var externalDeptSelectId=$("#externalDeptSelect").val();
                if (externalDeptSelectId == undefined || externalDeptSelectId == null || externalDeptSelectId == '') {
                    externalDeptSelectId = "-200";
                }
                mysearch(externalDeptSelectId, "Y");
                // $("#internalPersonnelTab").attr("style","color:black;");
                // $("#externalPersonnelTab").attr("style","color:white;");
                $("#internalPersonnel").attr("style","display:none;");
                $("#externalPersonnel").attr("style","display:block;");
                $("#internalSelectDiv").attr("style","display:none;padding: 0px");
                $("#externalSelectDiv").attr("style","display:block;padding: 0px");
            }
        })

    // 展开、折叠
        function collapseBtn() {
            if ($("#allInDataUlLi").is(":hidden")) {
                var internalDeptSelectId=$("#internalDeptSelect").val();
                if (internalDeptSelectId == undefined || internalDeptSelectId == null || internalDeptSelectId == '') {
                    internalDeptSelectId = "-100";
                }
                mysearchForInDeptTable(internalDeptSelectId, "N");
                $("#allInDataUlLi").attr("style","display:block;padding-left: 0px;padding-right: 0px;");
                $("#openBtn").attr("style","display:none;");
                $("#closeBtn").attr("style","display:block;");
            } else {
                $("#allInDataUlLi").attr("style","display:none;");
                $("#openBtn").attr("style","display:block;");
                $("#closeBtn").attr("style","display:none;");
            }
        }
        function collapseBtnWb() {
            if ($("#allInDataUlLiWb").is(":hidden")) {
                var externalDeptSelectId=$("#externalDeptSelect").val();
                if (externalDeptSelectId == undefined || externalDeptSelectId == null || externalDeptSelectId == '') {
                    externalDeptSelectId = "-200";
                }
                mysearchForExDeptTable(externalDeptSelectId, "Y");
                $("#allInDataUlLiWb").attr("style","display:block;padding-left: 0px;padding-right: 0px;");
                $("#openBtnWb").attr("style","display:none;");
                $("#closeBtnWb").attr("style","display:block;");
            } else {
                $("#allInDataUlLiWb").attr("style","display:none;");
                $("#openBtnWb").attr("style","display:block;");
                $("#closeBtnWb").attr("style","display:none;");
            }
        }
    </script>
</body>
</html>
